<template>
  <div>
    <Banner></Banner>
    <div class="specialty">
      <el-header>
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          active-text-color="#CF975A"
          @select="handleSelect"
        >
          <el-menu-item index="1">乡村特产</el-menu-item>
          <el-menu-item index="2">地方特产</el-menu-item>
          <el-menu-item index="3">文创产品</el-menu-item>
        </el-menu>
      </el-header>
      <div class="methods">
        <el-button
          type="text"
          :class="[isActive == 1 ? 'actived' : '']"
          @click="filterConditon(1)"
          >默认</el-button
        ><el-button
          type="text"
          :class="[isActive == 2 ? 'actived' : '']"
          @click="filterConditon(2)"
          >销量</el-button
        ><el-button
          type="text"
          :class="[isActive == 3 ? 'actived' : '']"
          @click="filterConditon(3)"
          >价格 <i class="el-icon-d-caret"></i
        ></el-button>
      </div>
      <div class="list" v-if="goodList && goodList.length">
        <Specialty
          v-for="(item, i) in goodList"
          :key="i"
          :style="{ marginBottom: '31px', marginRight: '16px' }"
          :content="item"
        />
      </div>
      <Empty v-else />
      <div class="footer">
        <el-pagination
          prev-text="上一页"
          next-text="下一页"
          background
          hide-on-single-page
          layout="prev, pager, next"
          @current-change="pageChange"
          :total="totalNum"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import Banner from "../../components/banner/index.vue";
import Empty from "../../components/Empty.vue";
import Specialty from "../../components/specialty/index";
import { sortObj } from "../../utils/sort";

export default {
  data() {
    return {
      goodList: [],
      activeIndex: "1",
      isActive: 1,
      currentPage: 1,
      productTypeId: 0,
      proType: [],
      totalNum: 0,
      seachText: this.$route.query.search,
    };
  },
  components: {
    Banner,
    Specialty,
    Empty,
  },
  mounted() {
    console.log(this.isActive === 1);
    this.getProType();
    this.getData();
  },
  watch: {
    $route: {
      handler() {
        this.seachText = this.$route.query.search;
        this.currentPage = 1;
        this.getData();
        //深度监听，同时也可监听到param参数变化
      },
      deep: true,
    },
  },
  methods: {
    handleSelect(key) {
      this.activeIndex = key;
      for (let i = 0; i < this.proType.length; i++) {
        let item = this.proType[i];
        let name =
          Number.parseInt(key) === 1
            ? "乡村特产"
            : Number.parseInt(key) === 2
            ? "地方特产"
            : "文创产品";
        if (item.typeName === name) {
          this.productTypeId = item.id;
          break;
        }
      }
      this.getData();
    },
    filterConditon(index) {
      this.isActive = index;
      let key = index === 1 ? "id" : index === 2 ? "buyNum" : "productPriceMin";
      sortObj(this.goodList, key);
    },
    getProType() {
      this.$http
        .fetch(this.$apiPath.getProType, {
          method: "get",
        })
        .then((res) => {
          if (res.code === 200) {
            this.proType = res.data;
          }
        });
    },
    getData() {
      let params = {
        page: this.currentPage,
        rows: 12,
      };
      if (this.seachText) {
        params.productName = this.seachText;
      } else {
        params.productTypeId = this.productTypeId ? this.productTypeId : "";
      }
      this.$http
        .fetch(this.$apiPath.getPage, {
          method: "get",
          params,
        })
        .then((res) => {
          if (res.code === 200) {
            this.goodList = res.data.records;
            this.totalNum = res.data.total;
          }
        });
    },
    pageChange(val) {
      this.currentPage = val;
      this.getData();
    },
  },
};
</script>

<style lang="less" scoped>
@import url("./index.less");
</style>
